<template>
  <div class="sub-one">
    <div class="one-menu border-bm">
      <div class="large-btn btn1" @click="gotoNext('/ExamExercise', 5)">
        <div>顺序练习</div>
        <div>0/{{ sortTotal }}</div>
      </div>
      <div class="onemenu-list">
        <div class="onemenu-item" v-for="(item, index) in topMenuList" :key="index" @click="gotoNext(item.url)">
          <img :src="item.img" alt="" />
          <div>{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="one-menu">
      <div class="large-btn btn2" @click="gotoNext('/MockExam')">
        <div>模拟考试</div>
        <div>仿真冲刺</div>
      </div>
      <div class="onemenu-list">
        <div class="onemenu-item" v-for="(item, index) in bmMenuList" :key="index" @click="gotoNext(item.url, item.type)">
          <img :src="item.img" alt="" />
          <div>{{ item.title }}</div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <!-- 备案号 -->
    <div v-html="beian" class="footertxt"></div>
  </div>
</template>

<script>
import { getSortList } from "@/api/index.js";
import { getExcellentlist } from '@/api/course.js'
import { getPurchasedCourses } from '@/api/index.js'
export default {
  props: {
    subject: {
      type: Number,
      require: true,
    }
  },
  data() {
    return {
      beian:`Copyright (©) 2023   贵州讲安科技有限公司   版权所有   <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">备案号：黔ICP备2023002362号-1</a>`,
      topMenuList: [
        {
          img: require("@/assets/icon1.png"),
          title: "优品好课",
          url: "/GoodCourse",
        },
        {
          img: require("@/assets/icon2.png"),
          title: "已购课程",
          url: "/BuyCourse",
        },
        {
          img: require("@/assets/icon3.png"),
          title: "专题练习",
          url: "/SpecialExercises",
        },
        {
          img: require("@/assets/icon4.png"),
          title: "错题收藏",
          url: "/questionWrong",
        },
        {
          img: require("@/assets/icon5.png"),
          title: "章节练习",
          url: "/ChapterExercise",
        },
      ],
      bmMenuList: [
        {
          img: require("@/assets/icon6.png"),
          title: new Date().getFullYear() + "新题",
          url: "/ExamExercise",
          type: 6
        },
        {
          img: require("@/assets/icon7.png"),
          title: "免费试用",
          url: "/ExamExercise",
          type: 5
        },
        {
          img: require("@/assets/icon8.png"),
          title: "精选500",
          url: "/ExamExercise",
          type: 3
        },
        {
          img: require("@/assets/icon9.png"),
          title: "考前押题",
          url: "/ExamExercise",
          type: 4
        },
        {
          img: require("@/assets/icon10.png"),
          title: "考试成绩",
          url: "/ExamScores",
        },
      ],
      subject1: 0,
      sortTotal: 0,
      boxc:'msg-box',
    };
  },
  mounted() {
    this.subject1 = this.subject
    this.getSortLists()
    this.getPurchasedCourse()
    window.goBuy = this.goBuy
  },
  watch: {
    subject1: {
      handler() {
        this.getSortLists()
      },
      deep: true
    }
  },
  methods: {
    mockExam() {
      this.$router.push('/MockExam')
    },
    gotoNext(url, lx) {
      // console.log(999,this.subject1)
      this.$router.push({
        path: url,
        query: {
          type: this.subject1,
          topicType: lx
        }
      })
    },
    // 查询是否购买课程
			getPurchasedCourse(){
				let that = this
				getPurchasedCourses().then(res=>{
          // console.log(8,res)
					if(res.data.length == 0){
						that.open()
					}else{
						// that.isBuy = false
					}
				})
			},
    // 顺序练习
    getSortLists() {
      let that = this;
      getSortList({
        subject: this.subject1
      }).then(res => {
        // console.log(788,res)
        that.sortTotal = res.total;
      }).catch()
    },
    // 弹窗
    open() {
      // 获取课程列表
      let that = this
      getExcellentlist({ limit: 50 }).then(res => {
        let list = res.list
        if (list.length != 0) {
          let str = ``
          let strs = `<div class="tc_box">`
          let stre = `</div>`
          for (const s of list) {
            let s1 = `
            <div class="tc_item">
            <div class="cimg"><img src="${s.full_cover}" /></div>
            <div>${s.title}</div>
            <div class="price">￥${s.price}</div>
            <div class="btn" onclick="goBuy('${s.id}')">立即购买</div>
          </div>`
            str += s1
          }
          str = strs + str + stre
          this.$alert(str, '购买课程', {
            dangerouslyUseHTMLString: true,
            closeOnPressEscape:true,
            showConfirmButton: false,
            customClass: that.boxc
          });
        }
      })

    },
    goBuy(id) {
      this.$router.replace({
        path: '/GoodCourseDetail',
        query: {
          id
        }
      })
      // window.onload()
      this.$router.go(0)
    },
  }
};
</script>

<style lang="scss">
.footertxt{
  color: #999;
  text-align: center;
  a{
    text-decoration: none;
    color: #999;
  }
}
.msg-box {
  width: 800px !important;
  max-height: 600px;
  overflow-x: auto !important;
}

.border-bm {
  border-bottom: 1px solid #e6e6e6;
}

.btn1 {
  background-color: #52abf2;
  border: 1vh solid rgb(203, 230, 251);
}

.btn2 {
  background-color: #2ac092;
  border: 1vh solid rgb(191, 236, 222);
}

.one-menu {
  padding: 5% 0;
  display: flex;
  align-items: center;

  .large-btn {
    cursor: pointer;
    text-align: center;
    color: #fff;
    padding: 2.5% 2%;
    border-radius: 50%;

    margin-right: 8vw;
  }

  .onemenu-list {
    display: flex;
    width: 79%;
    justify-content: space-between;

    .onemenu-item {
      cursor: pointer;

      >div {
        margin-top: 2vh;
        text-align: center;
      }
    }
  }
}

.tc_box {

  .tc_item {
    display: flex;
    justify-content: space-between;
    line-height: 80px;
  }

  .cimg {
    width: 120px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;

    >img {
      width: 100%;
      height: 100%;
    }
  }

  .btn {
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    width: 50px;
    border-radius: 15px;
    padding: 0 10px;
    text-align: center;
    background-color: #2AC092;
    color: #fff;
    font-size: 12px;
    margin-top: 25px;
  }
  .price{
    color: #FF6D6A;
  }
}</style>